<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CSS Cookbook: Pagination</title>

    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 0;
            margin: 0;
        }

        /* class to hide content visually leaving it available to screenreaders.
        See notes in cookbook recipe. 
        https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182
        https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 
        */
        .visuallyhidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: auto;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            white-space: nowrap;
        }

        nav {
            display: flex;
            justify-content: center;
            border-top: 1px solid #eee;
            margin-top: 1em;
            padding-top: .5em;
        }

        .pagination {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .pagination li {
            margin: 0 1px;
        }

        .pagination a {
            display: block;
            padding: .5em 1em;
            border: 1px solid #999;
            border-radius: .2em;
            text-decoration: none;
        }

        .pagination a[aria-current="page"] {
            background-color: #333;
            color: #fff;
        }
    </style>



</head>

<body>

    <nav aria-label="pagination">
        <ul class="pagination">
            <li><a href=""><span aria-hidden="true">&laquo;</span><span class="visuallyhidden">previous set of pages</span></a></li>
            <li><a href=""><span class="visuallyhidden">page </span>1</a></li>
            <li><a href="" aria-current="page"><span class="visuallyhidden">page </span>2</a></li>
            <li><a href=""><span class="visuallyhidden">page </span>3</a></li>
            <li><a href=""><span class="visuallyhidden">page </span>4</a></li>
            <li><a href=""><span class="visuallyhidden">next set of pages</span><span aria-hidden="true">&raquo;</span></a></li>
        </ul>
    </nav>

</body>

</html>